<template>
  <div class="test-container">
    <div class="test-top">
      <div class="Dropdown">
        <span class="textName">面试宝典</span>
        <van-dropdown-menu ref="dropDown">
          <van-dropdown-item :title="selectedCity">
            <van-index-bar :index-list="indexList">
              <van-index-anchor
                v-for="(item, index) in indexList"
                :index="item"
                :key="index"
                ><van-cell
                  @click="selectCity(city)"
                  :title="city"
                  v-for="(city, index) in citys[item]"
                  :key="index"
              /></van-index-anchor>
            </van-index-bar>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
      <div class="scroll-wrap">
        <div class="content">
          <van-tag
            round
            size="large"
            type="success"
            v-for="(item, index) in theCityTestType"
            :key="item.id"
            @click="getQuestions({ item, index })"
            :class="{ tagActive: activeIndex == index }"
            >{{ item.name }}</van-tag
          >
        </div>
      </div>
    </div>
    <div class="item nav-box">
      <div class="item error">
        <div class="iconbgc">
          <van-icon
            class="iconfont"
            class-prefix="icon"
            name="cuotiku"
            size="26px"
          ></van-icon>
        </div>

        <span class="item-text">常错题库</span>
      </div>
      <div class="item collect">
        <van-icon name="star-o" size="26px" style="background-color: #ffc103" />
        <span class="item-text">收藏题库</span>
      </div>
      <div class="item company">
        <van-icon
          size="26px"
          @click="$router.push('/home')"
          name="notes-o"
          style="background-color: #00c9df"
        />
        <span class="item-text">企业题库</span>
      </div>
      <div class="item answer">
        <van-icon
          name="records"
          size="26px"
          style="background-color: #2cd593"
        />
        <span class="item-text">已答题库</span>
      </div>
      <!-- 正中间圆型图 -->
      <van-circle
        class="middle"
        v-model="currentRate"
        :rate="50"
        :speed="100"
        color="#e9184a"
        stroke-width="60"
        stroke-linecap="round"
        layer-color="#eee"
        size="120px"
      >
        <div class="circle-bg">
          <h4>刷题顺序</h4>
          <span>62/{{ total }}</span>
        </div>
      </van-circle>
    </div>
    <div class="num-box">
      <h2>累计收录</h2>
      <span>{{ total }}</span>
    </div>

    <van-button
      class="test-button"
      type="default"
      @click="$router.push('/interview')"
      :disabled="activeIndex == -1"
      >模拟面试</van-button
    >
  </div>
</template>

<script>
import { getCityList, getQuestions } from '@/api/test'
import { Toast } from 'vant'
export default {
  name: 'Test',
  data () {
    return {
      //当前进度
      currentRate: 70,
      //全国所有城市
      cityPositions: {},
      //各个首字母开头的城市
      citys: {},
      //所有面试题的总数
      total: 0,
      //索引栏索引列表
      indexList: [],
      //选择的城市
      selectedCity: '全国',
      //选中的城市拥有的题目职业类型
      theCityTestType: [],
      //面试题类型标签被激活的下标
      activeIndex: -1,
      //是否显示下拉框
      isShowDropDown: false,
    }
  },
  methods: {
    //获取城市列表
    async getCitys () {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
      })
      let res = await getCityList()
      if (res.code == 200) {
        this.cityPositions = res.data.cityPositions
        this.citys = res.data.citys
        //将对象中的所有key作为索引栏的索引
        this.indexList = Object.keys(res.data.citys)
        //让页面初始化时显示的职业tags为全国城市下的
        this.theCityTestType = this.cityPositions['全国']
        //获取面试题总数
        this.total = res.data.totalCount
      }
    },
    //选择城市
    selectCity (city) {
      this.selectedCity = city
      //关闭下拉框
      // this.$refs.dropDown.close()
    },
    //获取面试题
    async getQuestions ({ item, index }) {
      this.activeIndex = index
      // 获取面试题所需要准备的数据
      const data = {
        type: item.id,
        city: this.selectedCity,
      }
      //派发请求调用vuex仓库中的函数获取面试题
      try {
        await this.$store.dispatch('test/saveQuestions', data)
      } catch (error) {
        console.log(error)
      }
    },
    //显示下拉框
    showDropDown () {
      this.isShowDropDown = true
    },
  },
  watch: {
    //监听下拉框所选择的城市
    selectedCity: {
      handler (newValue, oldValue) {
        this.theCityTestType = this.cityPositions[newValue]
      },
    },
  },
  components: {},

  mounted () {
    this.getCitys()
  },
}
</script>

<style scoped lang="less">
::v-deep .van-dropdown-menu__bar {
  box-shadow: none;
}
::v-deep .van-dropdown-menu__title:after {
  border-color: transparent transparent #d12d3e #d12d3e;
}
::v-deep .van-ellipsis {
  font-size: 12px;
}

.Dropdown {
  display: flex;
  justify-content: center;
  .textName {
    padding-top: 10px;
    font-size: 18px;
  }
}
//v-deep后面必须接.类名，并且必须放在样式的最外面，不能嵌套在里面，否则不生效
//头部页签样式
::v-deep .van-tag {
  padding: 5px 10px;
  background: #f7f4f5;
  color: #545671;
  margin-right: 8px;
  font-size: 12px;
  height: 32px;
}
.tagActive {
  background: #00b8d4;
}
//头部样式
.test-container {
  .test-top {
    font-size: 18px;
    min-height: 100px;
    background-color: #fff;
    box-shadow: 0 0.05333rem 0.32rem rgb(100 101 102 / 8%);
    .scroll-wrap {
      width: 100%;
      //开启横向拖动，前提是里面显示内容不换行，才有效果
      overflow: scroll;
      //关闭横向拖动条
      &::-webkit-scrollbar {
        display: none;
      }
      .content {
        padding: 15px 15px 0;
        height: 60px;
        //设置让盒子中的内容不换行显示，这样才能使用滑动效果
        white-space: nowrap;
      }
    }
  }
}
//按钮样式
::v-deep .van-button--normal {
  padding: 0 16px;
}
::v-deep .van-button__content {
  justify-content: center;
  margin: 0 auto;
}
::v-deep .van-button {
  text-align: center;
}

//按钮样式
.test-button {
  width: 342px;
  height: 50px;
  display: flex;
  background: #00b8d4;
  border-radius: 10px;
  color: #fff;
  margin: 32px auto;
}
//数字展示模块样式
.num-box {
  margin-top: 20px;
  padding-top: 23px;
  text-align: center;
  height: 120px;

  h2 {
    margin-bottom: 23px;
    font-size: 28px;
  }
  span {
    font-size: 28px;
  }
}

//四大图标原生图标样式
::v-deep .van-icon {
  width: 48px;
  height: 48px;
  color: #fff;
  border-radius: 24px;
  position: relative;
  &:before {
    position: absolute;
    top: 12px;
    left: 12px;
  }
}

//自定义图标样式
::v-deep .icon {
  width: 48px;
  height: 48px;
  color: #fff;
  border-radius: 24px;
  position: relative;

  &:before {
    position: absolute;
    top: 12px;
    left: 12px;
  }
}

.iconbgc {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #ff6363;
}
//四大图标中间文本样式
.item-text {
  font-size: 12px;
  text-align: center;
  display: inline-block;
}

//中间大图标样式
.circle-bg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  color: #fff;

  h4 {
    margin-bottom: 10px;
  }
}

//四大图标样式
.nav-box {
  margin-top: 16px;
  width: 100%;
  height: 220px;
  position: relative;
  .middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(#ff6f92, #e40137);
    border-radius: 50%;
    display: flex;
  }
  .item {
    position: absolute;
    width: 53px;
    height: 72px;

    &:nth-child(1) {
      top: 22px;
      left: 46px;
    }
    &:nth-child(2) {
      top: 22px;
      right: 46px;
    }
    &:nth-child(3) {
      bottom: 22px;
      left: 46px;
    }
    &:nth-child(4) {
      bottom: 22px;
      right: 46px;
    }
  }
}
</style>
